<template>
  <div class="div">
    <div class="div1">
      <model :queList="queList" :butFlag="butFlag" :rules="rules" :items="items"
             :tabIndex="tabIndex" :editableTabsValue2="editableTabsValue2" @val="val" @ad="ad"
             @index="index" :editableTabs2="editableTabs2" @query="query" @addTab="addTab" :querys="querys"/>
    </div>
    <commtab :items="items" :butFlag="butFlag" :list="list" :loading="loading" :rules="rules" :high="high"
             @show="show" :editForm="editForm" @del="del" @val="val" @ad="ad"
             :editableTabsValue2="editableTabsValue2" :tabIndex="tabIndex" @index="index"
             :editableTabs2="editableTabs2" @editTab="editTab" @update="update"/>
    <!--<el-col :md="{span: 5, offset: 6}" :lg="{span: 4, offset: 10}">-->
    <!--<el-pagination-->
    <!--@size-change="handleSizeChange"-->
    <!--@current-change="handleCurrentChange"-->
    <!--:page-sizes="[20, 30, 40, 50]"-->
    <!--:page-size="pagesize"-->
    <!--:current-page="page"-->
    <!--layout="total, sizes, prev, pager, next, jumper"-->
    <!--:total="total">-->
    <!--</el-pagination>-->
    <!--</el-col>-->
  </div>
</template>
<script>
  import Commtab from '../components/Commtab.vue'
  import Model from '../components/Model.vue'
  import axios from 'axios'
  import Que  from '../components/Que.vue'
  import moment from 'moment'
  import {mapState} from 'vuex'
  export default{
    name: 'Job',
    components: {
      Model,
      Commtab
    },
    props: {
      editableTabsValue2: String,
      tabIndex: Number,
      editableTabs2: Array
    },
    data () {
      return {
        list: [],
        high: 0,
        loading: false,
        butFlag: true,
        items: [
          {
            prop: 'id',
            label: '标记数',
            table: false,
            add: false,
            edit: false
          },
          {
            prop: 'name',
            label: '岗位名称',
            table: true,
            add: true,
            edit: true
          },
          {
            prop: 'releaseTime',
            label: '发布时间',
            meth: function (row, column) {
              var date = row[column.property]
              if (date === null) {
                return date
              } else {
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
              }
            },
            table: true,
            add: false,
            edit: false
          },
          {
            prop: 'state',
            label: '状态',
            table: true,
            add: false,
            edit: false,
            sty: '0'
          },
          {
            prop: 'require',
            label: '要求',
            table: false,
            add: true,
            edit: true,
            numbers: '0'
          }
        ],
        queList: [
          {
            width: '3',
            name: '岗位',
            prop: 'name',
            i1: '0'
          }],
        querys: {
          name: ''
        },
        editForm: {
          id: '',
          name: '',
          require: ''
        },
        addForm: {
          name: '',
          require: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入职位', trigger: 'blur'},
            {min: 1, max: 20, message: '长度在 1 到 5 个字符', trigger: 'blur'}
          ],
          require: [
            {required: true, message: '请填写职位要求', trigger: 'blur'},
          ]
        }
      }
    },
    mounted () {
      this.get()
      this.high = window.innerHeight - 200
    },
    computed: {
      ...mapState({
        isLogin: state => state.eui.isLogin,
        username: state => state.eui.username
      })
    },
    created () {
      if (!sessionStorage.getItem('username')) {
        this.$router.replace('/')
      }
    },
    methods: {
      get () {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/jobb/get`,
          responseType: 'json',
          params: {
            name: this.querys.name
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.list = response.data.data
            this.loading = false
          } else {
            this.loading = false
            this.list = []
            this.$alert('没有相关内容', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      },
      query (msg) {
        this.name = msg.name
        this.page = 1
        this.get()
      },
      show (msg) {
        this.editForm.require = msg.require
        this.editForm.name = msg.name
        this.editForm.id = msg.id
        this.$emit('show', this.editForm)
        this.$emit('rule', this.rules)
      },
      val (msg) {
        this.$emit('val', msg)
      },
      ad (msg) {
        this.$emit('ad', msg)
      },
      index (msg) {
        this.$emit('index', msg)
      },
      query (msg) {
        this.title = msg.title
        this.get()
      },
      addTab (msg) {
        this.$emit('addtab', '')
      },
      editTab (msg) {
        this.$emit('editab', '')
      },
      del (msg) {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/jobb/del`,
          responseType: 'json',
          params: {
            id: msg.id
          }
        }).then((response) => {
          this.loading = false
          this.list = response.data.data
          this.$message('删除成功')
        }).catch(() => {
          this.loading = false
        })
      },
      update (msg) {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/jobb/changeState`,
          responseType: 'json',
          params: {
            id: msg.id,
            state: msg.state
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {

            this.$message('已更改')
          } else {
            this.$alert('更改失败', '提示', {
              confirmButtonText: '确定'
            })
          }
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
</script>
<style>
  .div1 {
    width: 100%;
    height: 50px;
    padding-top: 10px;
  }

  .el-select-dropdown__item {
    height: auto !important;
  }
</style>
